<template>
  <div>
    <div class="title-wrapper">
      <h3>{{ showTree ? '合同段' : '检查表'}}</h3>

      <div class="button-wrapper">
        <Button @click="handleBackClick" ghost type="primary">返回</Button>
        <Button @click="hanldeRecallClick" style="margin: 0 5px;" type="primary">撤回流程</Button>
      </div>
    </div>

    <TreeView v-if="showTree" />
    <FormView v-else />

    <ApprovalSidebar
    :id="dataId"
    :type="type"
    :flowType="approvalName"
    :visible = "true"
    model="default"
    ref="approvalSidebar" />
  </div>
</template>

<script>
import ApprovalSidebar from '@/components/approval-sidebar/index';
import FormView from './form-view';
import TreeView from './tree-view';
import { ApprovalType } from '@/config/cfg';
import { revokeFlow } from '@/api/message';

export default {
  components: {
    ApprovalSidebar,
    FormView,
    TreeView
  },
  data () {
    return {
      // 没有审批流程 21361 有审批流程 21349
      dataId: '',
      type: '',
      approvalName: 0
    };
  },
  computed: {
    showTree () {
      // eslint-disable-next-line eqeqeq
      return this.type == ApprovalType.SP_TYPE_XMHF;
    }
  },
  created () {
    const { dataid, type, dictId, approvalName } = this.$route.query;
    this.dataId = dataid;
    this.type = type;
    this.dictId = dictId;
    this.approvalName = approvalName;
  },
  methods: {
    handleBackClick () {
      this.$router.go(-1);
    },
    hanldeRecallClick () {
      this.$Modal.confirm({
        title: '确认撤回？',
        content: '<p>请确认是否撤回删除数据？</p>',
        loading: true,
        onOk: async () => {
          // console.log('撤回节点 req=>', id);
          const data = {
            'dictId': this.dictId
          };
          await revokeFlow(data);
          // console.log('撤回节点 res=>', resp);
          this.$Modal.remove();
          this.$router.go(-1);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.title-wrapper {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .button-wrapper {
    .ivu-btn {
      margin-left: 10px;
    }
  }
}
</style>
